<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Wrapped Set Lab</title>
    <link rel="stylesheet" type="text/css" href="../common.css">
    <script type="text/javascript" src="../scripts/jquery-1.2.1.js"></script>
    <script type="text/javascript" src="../scripts/support.labs.js"></script>
    <script type="text/javascript">
      $(function(){
        $('#resultsDisplay').hide();
        $('#labForm').submit(function(){
          try {
            var operation = $('#operationField').val();
            if (operation.length > 0) {
              var wrappedSet = domSampleFrame.performOperation(operation);
              $('#wrappedSetSizeDisplay').html('<strong>'+wrappedSet.length+'</strong>');
              $('#elementInfoDisplay').html(wrappedSet.formatForDisplay())
              $('#resultsDisplay').show();
            }
          }
          catch(e) {
            alert('error:'+e);
          }
          return false;
        });
        $.get('sample.dom.html',function(data){
          $('#htmlForSample').html(data.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/\n/g,'<br/>').replace(/ /g,'&nbsp;'));
        });
        $('#operationField').focus();
      });
    </script>
    <style>
      #operationFieldset,#domSampleFieldset {
        width: 388px;
        float: left;
      }
      #domSampleFieldset {
        margin-left: 12px;
      }
      #domSampleFrame {
        width: 368px;
        height: 428px;
      }
      #resultsDisplay {
        padding: 2px;
        background-color: beige;
      }
      #elementInfoDisplay {
        width: 368px;
        color: maroon;
      }
      #elementInfoDisplay div {
        margin-left: 8px;
      }
      #htmlDisplayFieldset {
        clear: both;
        width: 809px;
      }
      #operationField {
        width: 95%;
      }
    </style>
  </head>

  <body>

    <h1>Wrapped Set Lab</h1>

    <fieldset id="operationFieldset">
      <legend>Operation</legend>
      <form id="labForm">
        <div>
          Type a <strong>valid</strong> jQuery wrapped set operation into the text field below and click the Execute button.
        </div>
        <div>
          <label>Operation:</label><br/>
          <textarea rows="3" id="operationField"></textarea>
          <br/>
          <button type="submit" id="executeButton">Execute</button>
        </div>
      </form>
      <div id="resultsDisplay">
        <div>
          <label>Wrapped set elements: <span id="wrappedSetSizeDisplay">0</span> element(s)</label>
          <div id="elementInfoDisplay"></div>
        </div>
      </div>
    </fieldset>

    <fieldset id="domSampleFieldset">
      <legend>DOM Sample</legend>
      <iframe name="domSampleFrame" id="domSampleFrame" src="subpage.wrapped.set.html"></iframe>
    </fieldset>

    <fieldset id="htmlDisplayFieldset">
      <legend>HTML for DOM Sample</legend>
      <pre id="htmlForSample"></pre>
    </fieldset>

  </body>
</html>
